<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基础</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/html.css">
</head>
<body>
<div class="container">
    <div class="catalogue">
        <div><a href="#css_jj">CSS基础</a></div>
        <div><a href="#css_ys">CSS样式+优先级</a></div>
        <div><a href="#css_xzq">CSS选择器</a></div>
        <div><a href="#css_ways">CSS文本样式</a></div>
        <div><a href="#css_box">盒子模型</a></div>
        <div><a href="#css_bj">CSS背景和列表</a></div>
        <div><a href="#css_fd">浮动</a></div>
        <div><a href="#css_default">标签和浏览器默认样式</a></div>
        <div><a href="#css_dw">CSS定位(position)</a></div>
        <div><a href="#css_type">CSS网页布局</a></div>

    </div>
    <div class="substance">
        <div class="one">
            <h1 id="css_jj">CSS基础 | <a href="../demo/1-css布局demo.html" target="_blank">CSS布局demo</a></h1>
            <pre>
IETester: 各个版本IE浏览器模拟工具(需要下载)

HTML、CSS、JavaScript关系: HTML是网页内容的载体; CSS样式是表现(外观控制); JavaScript是行为,用来实现网页特效效果

什么是CSS: CSS 层叠样式表 (Cascading Style Sheets);用于定义HTML内容在浏览器内的显示样式
为什么学习CSS: CSS简化HTML相关标签,网页体积小,下载快; 解决内容与表现分离的问题; 更好的维护网页,提高工作效率

CSS 单位:
    1 长度单位: (数值后加单位,负值不要轻易使用)
        换算关系：
            1in(英寸) = 6pc(派) = 72pt(磅) = 2.54(厘米)
            1cm(厘米) = 10mm(毫米) = 0.3937(英寸)
            1pt(磅)  = 1/72in(英寸) = 0.2478mm(毫米)
            1pc(派)  = 1/6in(英寸)  = 我国新四号铅字的尺寸
    2 百分比单位
    3 颜色单位
    4 url 单位
            </pre>
        </div>
        <div class="one">
            <h1 id="css_ys">CSS样式+优先级 | <a target="_blank" href="https://www.runoob.com/css/css-tutorial.html">CSS菜鸟教程</a></h1>
            <h2>CSS样式</h2>
            <pre>
CSS样式规则由两部分构成: 选择器,声明

CSS样式命名规则
    1) 以小写字母开头;可以包含字母,数字,-,_
    2) 命名形式: 单字,连字符,下划线,驼峰
    3) 使用有意义命名
    4) 常用的CSS样式命名
        (1)页面结构   页头:header    导航:nav      页面主体:main          侧栏:sidebar        页尾:footer       栏目:column
                    内容:content/container       页面外围控制:wrapper    容器:container     左右中:left right center

        (2)导航      左导航:leftSidebar           右导航:rightSidebar    主导航:mainNav      菜单:menu    子导航: subNav
                    顶导航: topNav               边导航:sidebar         子菜单:subMenu       标题:title   摘要:summary

        (3)功能     标志:logo   广告:banner   注册:register     搜索:search   登录:login    功能区:shop   登录条:loginBar


1)外联式样式表/外部样式表: 同时加载HTML和css样式
    &lt;head&gt; &lt;link rel="stylesheet" href="/css/default.css"&gt; &lt;/head&gt;
        属性:  rel 用来说明&lt;link&gt;元素在这里要完成的任务是连接一个独立的 css 文件。
              href 属性给出了所要连接 css 文件的 url 地址

2)内部样式表/嵌入样式:同时加载HTML和css样式)
    &lt;head&gt;
        &lt;style type="text/css"&gt;
            &lt;!--  td{font:9pt;color:red}    .font105{font:10.5pt;color:blue}   --&gt;
        &lt;/style&gt;
    &lt;/head&gt;

 3)行内样式/内联样式: 同时加载HTML和css样式        e.g.: &lt;p style="color:red" &gt;&lt;/p&gt;

 4)导入式样式: 要放在样式代码的最开始处,导入式是读取完HTML文件后才加载样式
    &lt;head&gt;        &lt;style type="text/css"&gt; @import url(xx.css); &lt;/style&gt;    &lt;/head&gt;
            </pre>
            <h2>CSS优先级</h2>
            <pre>
优先级 (CSS层叠:可以定义多个样式;不冲突时叠加样式; 冲突时,按样式优先级应用样式)
    离目标元素越近优先级越高;
    同时对元素定义多个样式,会叠加效果;
    如果定义了重复样式,高优先级样式会覆盖掉低优先级的样式;
    优先级: 元素内定 > 内嵌样式表 > 导入样式表 > 外联样式表。

CSS选择器优先级(由高到低)
    1) !important: 强制到最高优先级   e.g.:  p{color:yellow !important;}
    2) CSS使用方法的优先级:  行内样式 > 内部样式 > 外部样式   注:link链入外部样式和style内部样式优先级,取决于先后顺序
    3) 样式表中优先级
        ID选择器 > class选择器 > 标签选择器 > 通配符
        同一样式表中:
            权值相同: 就近原则(离被设置元素越近优先级越高)
            权值不同: 使用权值高的
    <span style="color: darkred">选择器权值:  e.g.: #main div.warning h2{...}  权值为: id(1*100) + class(1*10) + 标签(2*1) = 112</span>
        通配符选择器:权值为0         标签选择器:权值为1      类选择器和伪类:权值为10
        ID选择器:权值为100          行内样式:权值为1000
            </pre>
        </div>
        <div class="one">
            <h1 id="css_xzq">CSS选择器</h1>
            <h2>普通选择器</h2>
            <pre>
(1)类选择器: .className;  demo: .intro{ color:red } //设置class="intro"元素的颜色为红色
(2)id选择器: #firstname;  demo: #one{ border: 1px yellow dashed } 	//设置id="one"的元素的边框为: 1px 黄色 虚线;
(3)全局选择器: *;  demo: *{ margin: 0 } //设置所有元素的外边距(上右下左)为0
            </pre>
            <h2>标签选择器</h2>
            <pre>
(1)元素选择器:  demo: p{xx} //选择所有p元素
(2)群组选择器:  demo: div,p{xx}  //选择所有div和p元素
(3)后代选择器:  demo: div p{xx}  //选择div元素内的p元素
(4)孩子选择器:  demo: div>p{xx}  //选择父元素为div的所有p元素
(5)兄弟选择器:  demo: div+p{xx}  //选择div元素之后(不是内部)紧跟的p元素;div元素下一个刚好是p元素的兄弟节点
(6)兄弟选择器:  demo: div~p{}    //选择div元素之后的所有兄弟p元素

            </pre>
            <h2>属性选择器 | <a target="_blank" href="../demo/3-属性选择器demo.html">属性选择器demo</a></h2>
            <pre>
(1)[attribute]:         demo: [target] 	        //选择带有 target 属性所有元素
(2)[attribute=value] 	demo: [target=_blank] 	//选择 target="_blank" 的所有元素
(3)[attribute~=value] 	demo: [title~=flower] 	//选择 title 属性包含单词 "flower" 的所有元素
(4)[attribute|=value] 	demo: [lang|=en] 	    //选择 lang 属性值以 "en" 开头的所有元素
(5)[attribute^=value] 	demo: [src^="https"] 	//选择src属性值以"https"开头的元素
(6)[attribute$=value] 	demo: [src$=".pdf"] 	//选择其src属性以".pdf"结尾的所有元素
(7)[attribute*=value] 	demo: [src*="abc"] 	    //选择其src属性中包含"abc"子串的每个元素

定义：CSS 属性选择器可以为拥有指定属性的 HTML 元素设置样式
注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
            </pre>
            <h2>伪类选择器</h2>
            <pre>
(1):link 	    a:link 	    选择所有未被访问的链接
(2):visited 	a:visited 	选择所有已被访问的链接
(3):hover 	    a:hover 	选择鼠标指针位于其上的链接
(4):active 	    a:active 	选择活动链接
(5):focus 	    input:focus 	选择获得焦点的 input 元素
(6):first-letter 	p:first-letter 	选择每个p元素的首字母
(7):first-line 	    p:first-line 	选择每个p元素的首行
(8):first-child 	p:first-child 	选择p元素的第一个孩子(如果标签之间存在空白符,则第一个孩子是空白符)
(9):before 	        p:before 	在每个p元素的内容之前插入内容
(10):after 	        p:after 	在每个p元素的内容之后插入内容
(11):lang(language) 	p:lang(it) 	选择p元素中,lang属性值以'it'开头的元素

            </pre>
            <h2>孩子选择器 | <a target="_blank" href="../demo/2-孩子选择器demo.html">孩子选择器demo</a></h2>
            <pre>
nth-child(n):  demo:  p:nth-child(3n+0){background:red;} // 匹配p标签的父元素的孩子中,满足3n+0位置的元素,并且是p元素的所有元素
           其中n可以是数字、关键词或公式;n为odd(匹配奇数)和even(匹配偶数);第一个子元素的下标是1
注意：Internet Explorer 不支持 :nth-child() 选择器
            </pre>
        </div>
        <div class="one">
            <h1 id="css_ways">CSS文本样式 | <a target="_blank" href="../demo/4-文本样式demo.html">文本样式demo</a></h1>
            <pre>
<b>文字: 字体、字体大小、颜色、加粗等   文本: 行高、对齐方式、文本装饰等</b>

(1)font 的属性比较多,有: font-style,font-variant,font-weight,font-size,font-family
(2)简写 font 属性需要注意以下几点:
    按照 font-style font-variant font-weight font-size/line-height font-family 顺序来写;
	先写字体大小在写字体;
	font-size/line-height 作为一组使用,中间用斜杠区分;
	多个值之间用空格分开;
	多个字体之间用逗号分开;

2-1) font-style(文字样式): normal|italic(斜体)|oblique(倾斜)|inherit(继承)|initial(最初的)|revert(还原)|unset(未装配的)

2-2) font-variant(字体变形):normal|small-caps(小型大写字母)

2-3) font-weight(文字粗细):normal|bold|bolder|lighter|100~900  说明:默认值是normal; 400等同于normal,700=bold

2-4) font-size(文字大小):绝对单位|相对单位
    4-1)相对单位(受屏幕分辨率影响): px(像素)|em|%|larger(相对父元素大小变大)|smaller(相对父元素大小变小)
    4-2)绝对单位
                in  Inch,英寸 1英寸=2.54厘米
                cm  厘米; 1厘米=0.394英寸
                mm  毫米; 1毫米=0.1厘米
                pt  磅,印刷的点数; 72磅=1英寸
                pc  Pica, 1pc=12pt
    4-3)CCS2缩放系数1.2
                XX-small    9px
                X-small     11px
                small       13px
                medium      16px
                large       19px
                X-large     23px
                XX-large    28px

2-5) line-height(文本行高):长度值|百分比     e.g.: text-indent:2em /* 设置首行缩进2个字符 */
    行高指文本行的基线间的距离; top line(顶线)  | middle line(中线)  | base line(基线) | bottom line(底线)
    行距指一个行的底线和另一个行的顶线的距离

2-6) font-family(字体):字体1|字体2|字体集  /* 设置了多个字体,会依次寻找,直到匹配为止;如果都不匹配,则使用浏览器默认的字体 */
                字体集: Serif  |  Sans-serif  |  Monospace  | Cursive  | Fantasy

2-7) font-color(文字颜色):具体颜色名|rgb(x,x,x)|#xxxxxx  <a href="https://www.bootcss.com/p/websafecolors/"
                                                          target="_blank">Web安全色网址</a>

2-8) text-align(水平对齐方式):left|right|center|justify  /* 只对块级元素有效 */ e.g.: 设置文本居中(考虑IE兼容性) p{ width:50%; margin:0 auto}

2-9) vertical-align(垂直对齐方式):baseline|sub|super|top|text-top|middle|bottom|text-bottom|长度|百分比  /*对块级元素不生效*/

2-10) 块级元素转行内元素:  父元素上设置 display:table  子元素上设置 display:table-cell

2-11) word-spacing: 设置元素内单词之间间距     letter-spacing:设置元素内字母之间间距

2-12) text-transform(设置元素内文本的大小写):capitalize(首字母大写)|uppercase(大写)|lowercase(小写)|none

2-13) text-decoration(设置元素内文本的装饰):underline(下划线)|overline(上划线)|line-through(删除线)|blink(闪烁)|none

2-14) css文本样式应用技巧:  网页制作从整体到局部  and 借助手册和网络

            </pre>
        </div>
        <div class="one">
            <h1 id="css_box">盒子模型 | <a target="_blank" href="../demo/5-盒子模型demo.html">盒子模型demo</a></h1>
            <pre>
box-sizing属性(盒子模型):
    inherit : 规定应从父元素继承 box-sizing 属性的值
    content-box : 在宽度和高度之外绘制元素的内边距和边框(默认值); 内边距和边框在盒子外;
    border-box :  在宽度和高度之内绘制元素的内边距和边框; 内边距和边框在盒子里;

1)盒子模型概念
    width/max-width/min-width:    长度值|百分比|auto
    height/max-height/min-height: 长度值|百分比|auto
    margin:外边距  | border:边框  | padding:内边距
    注: 高宽只有块级元素and替换元素可以设置;替换元素: img  input  textarea

2)边框 ( 边框属性缩写  border:宽度|样式|颜色 )
    边框宽度 border-width: thin(薄的) | medium(中等的) | thick(厚的) | 长度值
    边框颜色 border-color: 颜色 | transparent(透明)
    边框样式 border-style: 值 none:无边框,默认值  groove:3D凹槽边框    ridge:3D垄状边框    hidden:与none相同,除非在表格元素中解决边框冲突时
                            dashed:定义虚线    solid:实线          double:双线        dotted:定义点状边框,多数浏览器中呈现实线
                            inherit:继承父元素边框      inset:3D inset 边框            outset:3D outset边框

3)内边距(元素内容与边框的距离)  padding:长度值|百分比  不能为负值

4)外边距(元素与元素之间的距离)  margin:长度值|百分比|auto(可使元素水平方向居中)
                可为负值;HTML元素之间默认存在margin   垂直方向,两个相邻元素都设置外边距,外边距会发生合并;合并的高度取2者最大值

5)display属性块级元素与行内元素相互转化   inline:元素将显示为内联元素,元素前后没有换行符  block:元素将显示为块级元素,元素前后会带有换行符
                                   inline-block:行内块元素,元素呈现为inline,具有block相应特性    none:此元素不会被显示

6)样式属性 width/height/padding/margin/border 默认不继承;可以设置属性值为 inherit(继承),指定从父元素继承相对属性值
                e.g.: div{padding:10px}  div p{padding:inherit}
            </pre>
        </div>
        <div class="one">
            <h1 id="css_bj">CSS背景和列表</h1>
            <h2>背景</h2>
            <pre>
(1)元素背景颜色 background-color:颜色|transparent
    说明: transparent是全透明黑色(black)的速记法,类似rgba(0,0,0,0)这样的值
         颜色值(颜色名|RGB|十六进制)
         背景区包括: 内容,内边距(padding)和边框,不包含外边距(margin)

(2)元素背景图 background-image:URL|none
    说明: url地址可以是相对地址也可以是绝对地址;
         元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距
         默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复

(3)设置背景图像的起始位置 background-position:百分比|值|top|right|bottom|left|center
    说明:长度值(x,y)     第一个值水平位置,第二个值垂直位置;左上角0,0;只写一个参数的话,第二个默认居中
        百分比(x%,y%)   第一个值水平位置的百分比,第二个值垂直位置的百分比;左上角 0% 0%,右下角 100% 100%,如果仅规定一个值,另一个值将是50%
        top             顶部显示,相当于垂直方向0;
        right           右边显示,相当于水平方向100%
        left            左边显示,相当于水平方向0
        bottom          底部显示,相当于垂直方向100%
        center          居中显示,相当于水平方向50%或者垂直方向50%

(4)背景图片显示方式 background-attachment:scroll|fixed
    说明: scroll,默认值;背景图片随滚动条滚动
         fixed,当页面的其余部分滚动时,背景图片不会移动

(5)设置背景图像是否是否重复及如何重复 background-repeat:repeat|no-repeat|repeat-x|repeat-y
background:简写属性 空格隔开,不区分先后顺序
            </pre>
            <h2>列表样式</h2>
            <pre>
(1)list-style-type:设置列表项标志的类型
将图像设置为列表项标志  list-style-image:URL|none
设置列表中列表项标志的位置 list-style-position:inside|outside
    说明: inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
         outside:默认值,列表项目标记放置在文本以外,且环绕文本不跟据标记对齐

(2)list-style:简写属性;顺序不固定
    无序列表:   none 无标记 | disc 实心圆点 | circle 空心圆点 | square 实心方块
    有序列表:
        none 无标记 | decimal 从1开始的整数
        lower-roman 小写罗马数字 | upper-roman 大写罗马数字
        lower-alpha 小写英文字母 | upper-alpha 大写英文字母
            </pre>
        </div>
        <div class="one">
            <h1 id="css_fd">浮动 | <a target="_blank" href="../demo/6-浮动demo.html">浮动demo</a></h1>
            <pre>
CSS定位机制: 普通流(标准流)  + 浮动  + 绝对定位
语法: float:left|right|none
(1)普通流(标准流): 默认状态,元素自动从左往右,从上往下的排列

(2)浮动的基础知识: 1)会使元素向左或向右移动;只能左右,不能上下
             2)浮动元素碰到包含框或另一个浮动框,浮动停止
             3)浮动元素之后的元素将围绕它,之前的不受影响
             4)浮动元素会脱离标准流
             5)元素浮动后具备inline-block(行内块元素)属性

(3)清除浮动语法: clear:none|left|right|both  设置了float的元素会影响其他相邻元素,需要使用clear清除浮动,clear只会影响自身,不会对其他相邻元素造成影响
清除浮动的常用方法:
    方法一: 在浮动元素后使用一个空元素;  e.g.: &lt;div class="clear"&gt;&lt;/div&gt;
    方法二: 给浮动元素的容器添加 overflow:hidden;      *zoom:1  /*触发hasLayout兼容IE6,7*/
    方法三: 使用CSS3的:after伪元素(在元素后面添加一个空盒子)
            .clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both}
            .clearfix{ *zoom:1  /*触发hasLayout兼容IE6,7*/}
    清除浮动的其他方法:
                1)父级元素定义height.只适合高度固定的布局
                2)父级元素也一起浮动.不推荐,会产生新的问题
            </pre>
        </div>
        <div class="one">
            <h1 id="css_default">标签和浏览器默认样式</h1>
            <h2>标签默认样式</h2>
            <pre>
html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,h1~h6,noframes,ol,p,ul,center,dir,hr,menu,pre{ display: block }
/*以上列表元素默认状态下以块状显示,未显示的将以内联元素显示,该列表针对 HTML4 版本,部分元素在 XHTML1 中将废弃*/

li { display: list-item }   /*默认以列表显示*/
head { display: none }  /*默认不显示*/
table { display: table }    /*默认为表格显示*/
tr { display: table-row }   /*默认为表格行显示*/
thead { display: table-header-group }   /*默认为表格头部分组显示*/
tbody { display: table-row-group }  /*默认为表格行分组显示*/
tfoot { display: table-footer-group }   /*默认为表格底部分组显示*/
col { display: table-column }   /*默认为表格列显示*/
colgroup { display: table-column-group }    /*默认为表格列分组显示*/
td, th { display: table-cell; } /*默认为单元格显示*/
th { font-weight: bolder; text-align: center }  /*默认为表格标题显示，呈现加粗居中状态*/
caption { display: table-caption;text-align: center }  /*默认为表格标题显示,呈现居中状态*/
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,var, address { font-style: italic }
pre, tt, code, kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea, input, object, select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }     /*定义 sub 元素默认为下标显示*/
sup { vertical-align: super }   /*定义 sub 元素默认为上标显示*/
table { border-spacing: 2px; }
thead, tbody, tfoot { vertical-align: middle }  /*定义表头、主体表、表脚元素默认为垂直对齐*/
td, th { vertical-align: inherit }  /*定义单元格、列标题默认为垂直对齐默认为继承*/
s, strike, del { text-decoration: line-through }    /*定义这些元素默认为删除线显示*/
hr { border: 1px inset }    /*定义分割线默认为 1px 宽的 3D 凹边效果*/
ol, ul, dir, menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "A" } /*定义换行元素的伪对象内容样式*/
:before, :after { white-space: pre-line }   /*定义伪对象空格字符的默认样式*/
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }  /*定义BDO 元素当其属性为 DIR="ltr"时的默认文本读写显示顺序*/
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }  /*定义BDO 元素当其属性为 DIR="rtl"时的默认文本读写显示顺序*/
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }    /*定义任何元素当其属性为 DIR="ltr"时的默认文本读写显示顺序*/
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }    /*定义任何元素当其属性为 DIR="rtl"时的默认文本读写显示顺序*/
@media print {   /*定义标题和列表默认的打印样式*/
h1 { page-break-before: always }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
            </pre>
            <h2>浏览器默认样式</h2>
            <pre>
1.页边距
    IE 默认为 10px，通过 body 的 margin 属性设置
    FF 默认为 8px，通过 body 的 padding 属性设置
    要清除页边距一定要清除这两个属性值; 代码如下:	body { 	margin:0; 	padding:0; 	}
2.段间距
    IE 默认为 19px，通过 p 的 margin-top 属性设置
    FF 默认为 1.12em，通过 p 的 margin-bottom 属性设
    p 默认为块状显示,要清除段间距,一般可以设置    代码如下:	p {	margin-top:0;margin-bottom:0;	}
3.标题样式
    h1~h6 默认加粗显示：font-weight:bold;
    还有是这样的写的
        h1 {font-size:xx-large;}          h2 {font-size:x-large;}          h3 {font-size:large;}
        h4 {font-size:medium;}            h5 {font-size:small;}            h6 {font-size:x-small;}
    浏览器默认字体大小为 16px，即等于 medium，h1~h6 元素默认以块状显示;字体显示为粗体，
    要清除标题样式,一般可以设置;    代码如下:  hx {font-weight:normal;font-size:value;}
4.列表样式
    IE 默认为 40px，通过 ul、ol 的 margin 属性设置
    FF 默认为 40px，通过 ul、ol 的 padding 属性设置
    dl 无缩进，但起内部的说明元素 dd 默认缩进 40px，而名称元素 dt 没有缩进。
    要清除列表样式，一般可以设置
    代码如下:
            ul, ol, dd {
                list-style-type:none;/*清除列表样式符*/
                margin-left:0;/*清除IE 左缩进*/
                padding-left:0;/*清除非 IE 左缩进*/
            }
5.元素居中
    IE 默认为 text-align:center;
    FF 默认为 margin-left:auto;margin-right:auto;
6.超链接样式
    a 样式默认带有下划线,显示颜色为蓝色,被访问过的超链接变紫色,要清除链接样式,一般可以设置
    代码如下: a { text-decoration:none;  color:#colorname;}
7 鼠标样式
    IE 默认为 cursor:hand;
    FF 默认为 cursor:pointer;。该声明在 IE 中也有效
8 图片链接样式
    IE 默认为紫色 2px 的边框线
    FF 默认为蓝色 2px 的边框线
    要清除图片链接样式，一般可以设置 img { border:0;}
            </pre>
        </div>
        <div class="one">
            <h1 id="css_dw">CSS定位(position)</h1>
            <h2>position属性(定位)</h2>
            <pre>
1)static 自然模型(静态定位/常规定位/自然定位 )
    作用: 使元素定位与 常规/自然流中 （块、行垂直排列下去、行内水平从左到右）
    特点: (1)忽略top,bottom,left,right或者z-index声明
         (2)两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的
         (3)具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大占满剩余宽度;造成的效果就是这个块水平居中

2)Relative 相对定位模型
    作用: 使元素称为containing-block(容器块) 官话是可定位的祖先元素
    特点:    (1)可以使用top/right/bottom/left/z-index进行相对定位
            (2)相对定位的元素不会离开常规流
            (3)任何元素都可以设置为relative,它的绝对定位的后代都可以相对于它进行绝对定位
            (4)可以使用浮动元素发生偏移,并控制它们的堆叠顺序

3)absolute 绝对定位模型: 使元素的位置与文档流无关,因此不占据空间
    作用:使元素脱离常规流
    特点:(1)脱离常规流   (2)设置尺寸要注意;百分比比的是最近定位祖先元素
        (3)lrtb如果为0 它将对齐到最近定位祖先元素的各边——衍生出一个居中妙计
        (4)lrtb如果设置为auto 它将被打回原形
        (5)如果没有最近定位祖先元素,则相对body定位;
        (6)z-index可以控制堆叠顺序
元素绝对定位后生成块状元素,不论原来它在正常文档流中是什么类型的元素;可结合 top、left、right、bottom 使用;
    ֎ 绝对定位的元素的位置相对于最近的已定位祖先元素进行定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，也就是 HTML。
    ֎ 最近的已定位祖先元素：可以是父元素，也可以是父元素的父元素，若直属父元素没有定位，会一直向上找，直到找到有定位的祖先元素。
    ֎ 最近的已定位祖先元素的要求： 该定位必须是 static 定位以外的定位（可以是absolute、relative、fixed）


4)fixed 固定定位模型
    作用: 我跟绝对定位本是同根生相煎何太急
    特点:(1)跟absolute有啥区别？相对于谁做绝对定位
        (2)固定定位元素不会随着视口滚动而滚动   (3)继承absolute特点

5)sticky 磁贴定位模型(磁贴定位/粘性定位/吸附定)  -->赛季新秀 实力布局糖
    作用: relative+fixed的完美结合，制造出吸附效果
    特点: (1)如果产生偏移 原位置还是会在常规流中，一亩三分地留着
        (2)如果它的最近祖先有滚动 那么它的偏移标尺就是最近祖先元素
        (3)如果最近祖先元素没有滚动 那么它的偏移标尺是视口   (4)上下左右的偏移规则

position之总结:
    定位模块: 其他有关定位的方方面面
    定位模型: 1) static:回归本真    2) relative:相对定位,保留老家地
            3) absolute:绝对定位,破釜沉舟; 参照物:最近定位祖先元素
            4) fixed:固定定位,参照物是视口
            5) sticky:磁贴定位,定位矩形; 参照物: 视口 + 最近可滚动的祖先元素
            6) *inherit: 继承父元素的定位模型
    定位属性: 为当前元素选择一种定位模型
            </pre>
            <h2>z-index 属性设置元素的堆叠顺序</h2>
            <pre>auto 默认;堆叠顺序与父元素相等.
number 设置元素的堆叠顺序;   inherit 规定应该从父元素继承 z-index 属性的值;
注意: 1、元素可拥有负的 z-index 属性值。 2、Z-index 仅能在定位元素上奏效(例如 position:absolute;)
说明:该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远

参与规则: z-index 属性仅在节点的 position 属性为 relative, absolute 或者fixed 时生效;

顺序规则: 如果不对节点设定 position 属性,位于文档流后面的节点会遮盖前面的节点

从父规则:
    如果所有节点都定义了position:relative,A节点的z-index和B节点一样大,但因为顺序规则,B节点覆盖在A节点前面.
    就算A的子节点z-index值比B的子节点大,B的子节点还是会覆盖在A的子节点前面;

                </pre>
        </div>
        <div class="one">
            <h1 id="css_type">
                CSS网页布局 |
                <a target="_blank" href="../demo/圣杯布局.html">圣杯布局demo</a> |
                <a target="_blank" href="../demo/双飞翼布局.html">双飞翼布局demo</a>
            </h1>
            <h2>行布局 </h2>
            <pre>
经典的行布局:
    1)基础的行布局 + 行布局自适应 + 行布局自适应限制最大宽 + 行布局垂直水平居中
    2)行布局固定宽 + 行布局某部位自适应 + 行布局导航随屏幕滚动
    3)两列布局固定 + 两列布局自适应 + 三列布局固定 + 三列布局自适应
    4)混合布局固定 + 混合布局自适应

行布局:
    margin:0 auto; /*上下为0,左右居中*/
    width:100%; /*页面自适应*/
    {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50%width;
        margin-top: -50%height;
    }
    /*垂直、水平都居中*/

圣杯布局和双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float 浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局
            </pre>
            <h2>多列布局</h2>
            <pre>
双飞翼布局的好处:
    （1）主要的内容先加载的优化；
    （2）兼容目前所有的主流浏览器，包括 IE6 在内；
    （3）实现不同的布局方式，可以通过调整相关 CSS 属性即可实现

width/min-width/max-width: 宽度/最小宽度/最大宽度
	auto 默认值
	length 单位是 px
	% 基于包含块（父元素）宽度的百分比宽度
	inherit 继承父元素的宽度值
            </pre>
            <h2>圣杯布局</h2>
            <pre>
认识圣杯布局:圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念;在国内由淘宝UED的工程师传播开来;经改良后也被称为双飞翼布局
布局要求:
        - 三列布局，中间宽度自适应，两边定宽
        - 中间栏要在浏览器中优先展示渲染
        - 允许任意列的高度最高
        - 用最简单的CSS、最少的HACK语句
圣杯布局的流程方式: Middle部分首先要放在container的最前部分;然后是Left,right
            </pre>
            <h2>双飞翼布局</h2>
            <pre>
经淘宝UED的工程师针对圣杯布局改良后得出双飞翼布局;去掉相对布局只需浮动和负边距
布局特色:兼容所有浏览器（IE6+,现代浏览器）的终极布局方案;目的都是左右两栏固定宽度,中间部分自适应.
            </pre>
        </div>
    </div>
</div>
</body>
</html>